<template>
  <div class="test-form">
    <!-- <parser :form-conf="formConf" @submit="sumbitForm1" /> -->
    <parser :key="key2" :form-conf="formConf" @submit="sumbitForm2" />
    <el-button @click="change">change</el-button>
  </div>
</template>

<script>
import Parser from '../Parser'

// 若parser是通过安装npm方式集成到项目中的，使用此行引入
// import Parser from 'form-gen-parser'

export default {
  components: {
    Parser
  },
  props: {},
  data() {
    return {
      key2: +new Date(),
      formConf: {
        fields: [
          {
            __config__: {
              label: '单行文本',
              labelWidth: null,
              showLabel: true,
              changeTag: true,
              tag: 'el-input',
              tagIcon: 'input',
              required: true,
              layout: 'colFormItem',
              span: 24,
              document: 'https://element.eleme.cn/#/zh-CN/component/input',
              regList: [
                {
                  pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
                  message: '手机号格式错误'
                }
              ]
            },
            __slot__: {
              prepend: '',
              append: ''
            },
            __vModel__: 'mobile',
            placeholder: '请输入手机号',
            style: {
              width: '100%'
            },
            clearable: true,
            'prefix-icon': 'el-icon-mobile',
            'suffix-icon': '',
            maxlength: 11,
            'show-word-limit': true,
            readonly: false,
            disabled: false
          },
          {
            __config__: {
              label: '多行文本',
              labelWidth: null,
              showLabel: true,
              tag: 'el-input',
              tagIcon: 'textarea',
              required: true,
              layout: 'colFormItem',
              span: 12,
              regList: [],
              changeTag: true,
              document: 'https://element.eleme.cn/#/zh-CN/component/input',
              formId: 101,
              renderKey: '1011654051216864'
            },
            type: 'textarea',
            placeholder: '请输入多行文本',
            autosize: {
              minRows: 4,
              maxRows: 4
            },
            style: {
              width: '100%'
            },
            maxlength: null,
            'show-word-limit': false,
            readonly: false,
            disabled: false,
            __vModel__: 'field101'
          },
          {
            __config__: {
              label: '级联选择',
              url: 'https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/cascaderList',
              method: 'get',
              dataPath: 'list',
              dataConsumer: 'options',
              showLabel: true,
              labelWidth: null,
              tag: 'el-cascader',
              tagIcon: 'cascader',
              layout: 'colFormItem',
              defaultValue: [],
              dataType: 'dynamic',
              span: 12,
              required: true,
              regList: [],
              changeTag: true,
              document: 'https://element.eleme.cn/#/zh-CN/component/cascader',
              formId: 102,
              renderKey: '1021654051218648'
            },
            options: [
              {
                id: 1,
                value: 1,
                label: '动态选项1',
                children: [
                  {
                    id: 2,
                    value: 2,
                    label: '动态选项1-1'
                  }
                ]
              }
            ],
            placeholder: '请选择级联选择',
            style: {
              width: '100%'
            },
            props: {
              props: {
                multiple: false,
                label: 'label',
                value: 'value',
                children: 'children'
              }
            },
            'show-all-levels': true,
            disabled: false,
            clearable: true,
            filterable: false,
            separator: '/',
            __vModel__: 'field102'
          },
          {
            __config__: {
              label: '多选框组',
              tag: 'el-checkbox-group',
              tagIcon: 'checkbox',
              defaultValue: [],
              span: 12,
              showLabel: true,
              labelWidth: null,
              layout: 'colFormItem',
              optionType: 'default',
              required: true,
              regList: [],
              changeTag: true,
              border: false,
              document: 'https://element.eleme.cn/#/zh-CN/component/checkbox',
              formId: 103,
              renderKey: '1031654051220283'
            },
            __slot__: {
              options: [
                {
                  label: '选项一',
                  value: 1
                },
                {
                  label: '选项二',
                  value: 2
                }
              ]
            },
            style: {},
            size: 'medium',
            disabled: false,
            __vModel__: 'field103'
          }
        ],
        formRef: 'elForm',
        formModel: 'formData',
        size: 'medium',
        labelPosition: 'right',
        labelSuffix: '：',
        labelWidth: 100,
        formRules: 'rules',
        gutter: 15,
        disabled: false,
        span: 12,
        formBtns: true
      },
      formConf2: {
        fields: [
          {
            __config__: {
              label: '单行文本',
              labelWidth: null,
              showLabel: true,
              changeTag: true,
              tag: 'el-input',
              tagIcon: 'input',
              required: true,
              layout: 'colFormItem',
              span: 24,
              document: 'https://element.eleme.cn/#/zh-CN/component/input',
              regList: [
                {
                  pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
                  message: '手机号格式错误'
                }
              ]
            },
            __slot__: {
              prepend: '',
              append: ''
            },
            __vModel__: 'mobile',
            placeholder: '请输入手机号',
            style: {
              width: '100%'
            },
            clearable: true,
            'prefix-icon': 'el-icon-mobile',
            'suffix-icon': '',
            maxlength: 11,
            'show-word-limit': true,
            readonly: false,
            disabled: false
          },
          {
            __config__: {
              label: '多行文本',
              labelWidth: null,
              showLabel: true,
              tag: 'el-input',
              tagIcon: 'textarea',
              required: true,
              layout: 'colFormItem',
              span: 12,
              regList: [],
              changeTag: true,
              document: 'https://element.eleme.cn/#/zh-CN/component/input',
              formId: 101,
              renderKey: '1011654051216864'
            },
            type: 'textarea',
            placeholder: '请输入多行文本',
            autosize: {
              minRows: 4,
              maxRows: 4
            },
            style: {
              width: '100%'
            },
            maxlength: null,
            'show-word-limit': false,
            readonly: false,
            disabled: false,
            __vModel__: 'field101'
          },
          {
            __config__: {
              label: '级联选择',
              url: 'https://www.fastmock.site/mock/f8d7a54fb1e60561e2f720d5a810009d/fg/cascaderList',
              method: 'get',
              dataPath: 'list',
              dataConsumer: 'options',
              showLabel: true,
              labelWidth: null,
              tag: 'el-cascader',
              tagIcon: 'cascader',
              layout: 'colFormItem',
              defaultValue: [],
              dataType: 'dynamic',
              span: 12,
              required: true,
              regList: [],
              changeTag: true,
              document: 'https://element.eleme.cn/#/zh-CN/component/cascader',
              formId: 102,
              renderKey: '1021654051218648'
            },
            options: [
              {
                id: 1,
                value: 1,
                label: '动态选项1',
                children: [
                  {
                    id: 2,
                    value: 2,
                    label: '动态选项1-1'
                  }
                ]
              }
            ],
            placeholder: '请选择级联选择',
            style: {
              width: '100%'
            },
            props: {
              props: {
                multiple: false,
                label: 'label',
                value: 'value',
                children: 'children'
              }
            },
            'show-all-levels': true,
            disabled: false,
            clearable: true,
            filterable: false,
            separator: '/',
            __vModel__: 'field102'
          },
          {
            __config__: {
              label: '多选框组',
              tag: 'el-checkbox-group',
              tagIcon: 'checkbox',
              defaultValue: [],
              span: 12,
              showLabel: true,
              labelWidth: null,
              layout: 'colFormItem',
              optionType: 'default',
              required: true,
              regList: [],
              changeTag: true,
              border: false,
              document: 'https://element.eleme.cn/#/zh-CN/component/checkbox',
              formId: 103,
              renderKey: '1031654051220283'
            },
            __slot__: {
              options: [
                {
                  label: '选项一',
                  value: 1
                },
                {
                  label: '选项二',
                  value: 2
                }
              ]
            },
            style: {},
            size: 'medium',
            disabled: false,
            __vModel__: 'field103'
          },
          {
            __config__: {
              label: '时间范围',
              tag: 'el-time-picker',
              tagIcon: 'time-range',
              span: 12,
              showLabel: true,
              labelWidth: null,
              layout: 'colFormItem',
              defaultValue: null,
              required: true,
              regList: [],
              changeTag: true,
              document: 'https://element.eleme.cn/#/zh-CN/component/time-picker',
              formId: 104,
              renderKey: '1041654052834598'
            },
            style: {
              width: '100%'
            },
            disabled: false,
            clearable: true,
            'is-range': true,
            'range-separator': '至',
            'start-placeholder': '开始时间',
            'end-placeholder': '结束时间',
            format: 'HH:mm:ss',
            'value-format': 'HH:mm:ss',
            __vModel__: 'field104'
          },
          {
            __config__: {
              label: '多选框组',
              tag: 'el-checkbox-group',
              tagIcon: 'checkbox',
              defaultValue: [],
              span: 12,
              showLabel: true,
              labelWidth: null,
              layout: 'colFormItem',
              optionType: 'default',
              required: true,
              regList: [],
              changeTag: true,
              border: false,
              document: 'https://element.eleme.cn/#/zh-CN/component/checkbox',
              formId: 107,
              renderKey: '1071654052837249'
            },
            __slot__: {
              options: [
                {
                  label: '选项一',
                  value: 1
                },
                {
                  label: '选项二',
                  value: 2
                }
              ]
            },
            style: {},
            size: 'medium',
            disabled: false,
            __vModel__: 'field107'
          },
          {
            __config__: {
              label: '密码',
              showLabel: true,
              labelWidth: null,
              changeTag: true,
              tag: 'el-input',
              tagIcon: 'password',
              layout: 'colFormItem',
              span: 12,
              required: true,
              regList: [],
              document: 'https://element.eleme.cn/#/zh-CN/component/input',
              formId: 108,
              renderKey: '1081654052840306'
            },
            __slot__: {
              prepend: '',
              append: ''
            },
            placeholder: '请输入密码',
            'show-password': true,
            style: {
              width: '100%'
            },
            clearable: true,
            'prefix-icon': '',
            'suffix-icon': '',
            maxlength: null,
            'show-word-limit': false,
            readonly: false,
            disabled: false,
            __vModel__: 'field108'
          },
          {
            __config__: {
              label: '时间选择',
              tag: 'el-time-picker',
              tagIcon: 'time',
              defaultValue: null,
              span: 12,
              showLabel: true,
              layout: 'colFormItem',
              labelWidth: null,
              required: true,
              regList: [],
              changeTag: true,
              document: 'https://element.eleme.cn/#/zh-CN/component/time-picker',
              formId: 105,
              renderKey: '1051654052835347'
            },
            placeholder: '请选择时间选择',
            style: {
              width: '100%'
            },
            disabled: false,
            clearable: true,
            'picker-options': {
              selectableRange: '00:00:00-23:59:59'
            },
            format: 'HH:mm:ss',
            'value-format': 'HH:mm:ss',
            __vModel__: 'field105'
          },
          {
            __config__: {
              label: '开关',
              tag: 'el-switch',
              tagIcon: 'switch',
              defaultValue: false,
              span: 12,
              showLabel: true,
              labelWidth: null,
              layout: 'colFormItem',
              required: true,
              regList: [],
              changeTag: true,
              document: 'https://element.eleme.cn/#/zh-CN/component/switch',
              formId: 106,
              renderKey: '1061654052836255'
            },
            style: {},
            disabled: false,
            'active-text': '',
            'inactive-text': '',
            'active-color': null,
            'inactive-color': null,
            'active-value': true,
            'inactive-value': false,
            __vModel__: 'field106'
          },
          {
            __config__: {
              label: '密码',
              showLabel: true,
              labelWidth: null,
              changeTag: true,
              tag: 'el-input',
              tagIcon: 'password',
              layout: 'colFormItem',
              span: 12,
              required: true,
              regList: [],
              document: 'https://element.eleme.cn/#/zh-CN/component/input',
              formId: 109,
              renderKey: '1091654052842082'
            },
            __slot__: {
              prepend: '',
              append: ''
            },
            placeholder: '请输入密码',
            'show-password': true,
            style: {
              width: '100%'
            },
            clearable: true,
            'prefix-icon': '',
            'suffix-icon': '',
            maxlength: null,
            'show-word-limit': false,
            readonly: false,
            disabled: false,
            __vModel__: 'field109'
          }
        ],
        formRef: 'elForm',
        formModel: 'formData',
        size: 'medium',
        labelPosition: 'right',
        labelSuffix: '：',
        labelWidth: 100,
        formRules: 'rules',
        gutter: 15,
        disabled: false,
        span: 12,
        formBtns: false,
        unFocusedComponentBorder: true
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // 表单数据回填，模拟异步请求场景
    setTimeout(() => {
      // 请求回来的表单数据
      const data = {
        mobile: '18836662555'
      }
      // 回填数据
      this.fillFormData(this.formConf, data)
      // 更新表单
      this.key2 = +new Date()
    }, 2000)
  },
  methods: {
    fillFormData(form, data) {
      form.fields.forEach((item) => {
        const val = data[item.__vModel__]
        if (val) {
          item.__config__.defaultValue = val
        }
      })
    },
    change() {
      this.key2 = +new Date()
      const t = this.formConf
      this.formConf = this.formConf2
      this.formConf2 = t
    },
    sumbitForm1(data) {
      console.log('sumbitForm1提交数据：', data)
    },
    sumbitForm2(data) {
      console.log('sumbitForm2提交数据：', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.test-form {
  margin: 15px auto;
  width: 800px;
  padding: 15px;
}
</style>
